<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-07-05 17:39:05
 * @Description: 
-->
<template>
    <el-row>
        <el-col :span="24" style="padding: 20px">
            <el-row>
                <el-col :span="6" :style="`padding-right: 10px;`">
                    <el-card style="width: 100%">
                        <el-row>
                            <el-col :span="24" class="type-search-container" style="margin-bottom: 20px;">
                                <el-input :prefix-icon="Search" :size="'small'" v-model="filterText"
                                    placeholder="算法类型查询" @enter.keyup="" />
                                <el-button size="small" type="primary" style="margin-left:10px">搜索</el-button>
                            </el-col>
                        </el-row>
                        <el-row style="margin-bottom: 10px;">
                            <el-col :span="12" style="box-sizing: border-box; padding: 0 5px;">
                                <el-button plain size="small" style="width: 100%;" type="primary">
                                    新增一级目录
                                </el-button>
                            </el-col>
                            <el-col :span="12" style="box-sizing: border-box; padding: 0 5px;">
                                <el-button plain size="small" style="width: 100%;" type="primary"
                                    @click="clearTypeHanlder">
                                    全部算法
                                </el-button>
                            </el-col>
                        </el-row>
                        <!--  <el-row style="margin-bottom: 10px;">
                            <el-col :span="8" style="box-sizing: border-box; padding: 0 5px;">
                                <el-button plain size="small" style="width: 100%;" type="primary">
                                    新增子目录
                                </el-button>
                            </el-col>
                            <el-col :span="8" style="box-sizing: border-box; padding: 0 5px;">
                                <el-button plain size="small" style="width: 100%;" type="primary">
                                    编辑
                                </el-button>
                            </el-col>
                            <el-col :span="8" style="box-sizing: border-box; padding: 0 5px;">
                                <el-button plain size="small" style="width: 100%;" type="primary">
                                    删除
                                </el-button>
                            </el-col>
                        </el-row> -->
                        <el-row>
                            <el-col :span="24">
                                <el-tree :style="`height: ${view.height - 285}px; overflow:auto;`" ref="treeRef"
                                    class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                                    v-loading="treeDataLoading" @node-click="handleNodeClick"
                                    :expand-on-click-node="false">
                                    <template #default="{ node, data }">
                                        <div class="custom-tree-node1" :title="`${node.label}--【 ${data.des} 】`">
                                            <div class="node-name">
                                                <el-icon v-if="node.isLeaf" color='#8d9095'
                                                    style="margin-right: 5px; font-size: 16px;">
                                                    <ElementPlus />
                                                </el-icon>
                                                <el-text type="primary">『 {{ node.label }} 』</el-text>
                                                <span style="color: #999; font-size: smaller;" v-if="data.des">
                                                    {{ data.des }}</span>
                                            </div>
                                            <!-- <div  v-if="!node.isLeaf">
                                                <el-link type="primary" @click.stop="">
                                                    新增
                                                </el-link>
                                            </div> -->
                                        </div>
                                    </template>
                                </el-tree>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="18">
                    <el-card>
                        <el-row>
                            <el-col :span="24" style="display:flex;justify-content: space-between;margin-bottom: 20px;">
                                <el-button type="primary" size="small" plain
                                    @click="centerDialogVisible = true">算法上传</el-button>
                                <div class="search-container">
                                    <el-input size="small" placeholder="算法查询" :prefix-icon="Search"
                                        style="width: 200px;" @keyup.enter="getAlgorithm" @change="getAlgorithm"
                                        clearable v-model="keyword" @clear="getAlgorithm"
                                        @input="inputHandler"></el-input>
                                    <el-button size="small" type="primary" @click="getAlgorithm">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <el-table ref="tableRef" :border="true" size="small" :data="tableData" style="width: 100%"
                            :height="view.height - 315" row-key="id" :expand-row-keys="expands"
                            v-loading="tableLoading">
                            <el-table-column :align="'center'" type="index" label="序号" width="60" />
                            <el-table-column :align="'left'" prop="name" label="算法名称" width="200">
                                <template #default="scope">
                                    <el-link size="small" type="primary">{{
                                        scope.row.name
                                    }}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column :align="''" prop="identifier" label="算法标识" width="200">
                                <template #header>
                                    <div style="display:flex;align-items:center">
                                        <el-icon>
                                            <InfoFilled />
                                        </el-icon>
                                        &nbsp;&nbsp;
                                        <span>算法标识</span>
                                    </div>
                                </template>
                                <template #default="scope">
                                    <el-link size="small" type="default">{{
                                        scope.row.identifier
                                    }}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" label="标签" width="300">
                                <template #default="scope">
                                    <el-tag type="primary" style="margin-right: 5px;" size="small"
                                        v-for="(type, index) in scope.row.typeCN.slice(0, 2)" :key="index"> {{ type
                                        }} </el-tag>

                                    <el-popover placement="top" :width="300">
                                        <template #reference>
                                            <el-link type="primary" size="small"
                                                v-if="scope.row.typeCN.length > 2">...</el-link>
                                        </template>
                                        <div >
                                            <el-tag type="primary" style="margin-right: 5px;" size="small"
                                                v-for="(type, index) in scope.row.typeCN" :key="index"> {{ type
                                                }} </el-tag>
                                        </div>
                                    </el-popover>


                                </template>
                            </el-table-column>
                            <el-table-column type="expand" label="参数" fixed="right">
                                <template #default="props">
                                    <div style="padding: 20px;">
                                        <el-card>
                                            <el-descriptions direction="vertical" class="margin-top"
                                                :title="'参数预设：' + props.row.identifier + ''" :column="2" :size="'small'"
                                                :border="true">
                                                <template #extra>
                                                    <el-button size="small" type="primary"
                                                        @click="eidtParamsHandler(props.row, JSON.parse(props.row.parameters))">修改参数预设</el-button>
                                                </template>
                                                <el-descriptions-item v-for=" item in JSON.parse(props.row.parameters)"
                                                    :span="spanFilter(item.form_type)">
                                                    <template #label>
                                                        <div class="cell-item">
                                                            {{ item.param_name }}({{ item.zh_name }})
                                                        </div>
                                                    </template>
                                                    <div v-if="!item.form_type" class="value-box"
                                                        style="display:flex;justify-content: space-between;">
                                                        <el-tag v-if="item.default_value">{{ item.default_value
                                                            }}</el-tag>
                                                        <span v-if="!item.default_value">
                                                            暂未填写...
                                                        </span>
                                                    </div>
                                                    <div v-if="item.form_type == 'File'"
                                                        style="display:flex;justify-content: space-between;"
                                                        class="value-box">
                                                        <el-tag v-if="item.default_value">{{ item.default_value
                                                            }}</el-tag>
                                                        <span v-if="!item.default_value">
                                                            暂未填写...
                                                        </span>
                                                    </div>
                                                    <el-card v-if="item.form_type == 'Files'" class="files-card">
                                                        <div class="tag-container value-box">
                                                            <el-tag size="small"
                                                                v-for=" (tag, index) in item.default_value"
                                                                :key="index">
                                                                {{ tag }}
                                                            </el-tag>
                                                        </div>
                                                    </el-card>
                                                    <el-select v-if="item.form_type == 'algorithm'"
                                                        v-model="item.default_value" placeholder="Select" size="small"
                                                        style="width: 240px" readonly disabled>
                                                        <el-option v-for="option in algorithmOptions" :key="item.value"
                                                            :label="option.label" :value="option.value" />
                                                    </el-select>
                                                    <div v-if="item.form_type == 'Dir'"
                                                        style="display:flex;justify-content: space-between;">
                                                        <el-tag v-if="item.default_value">{{ item.default_value
                                                            }}</el-tag>
                                                        <span v-if="!item.default_value">
                                                            暂未填写...
                                                        </span>
                                                    </div>
                                                    <div v-if="item.form_type == 'NewFile'"
                                                        style="display:flex;justify-content: space-between;">
                                                        <el-tag v-if="item.default_value">{{ item.default_value
                                                            }}</el-tag>
                                                        <span v-if="!item.default_value">
                                                            暂未填写...
                                                        </span>
                                                    </div>
                                                    <div v-if="item.form_type == 'runtimeParams'">
                                                        <el-row>
                                                            <el-col :span="8" v-for=" param in item.default_value"
                                                                style="padding: 0 5px"
                                                                v-show="param.param_name != 'AlgoName'">
                                                                <el-row>
                                                                    <el-col :span="24" style="padding: 10px 0 5px;">
                                                                        {{ param.param_name }}({{ param.zh_name }})
                                                                    </el-col>
                                                                    <el-col :span="24">
                                                                        <el-input size="small"
                                                                            v-model="param.default_value"
                                                                            :placeholder="`请输入${param.param_name}(${param.zh_name})`" />
                                                                    </el-col>
                                                                </el-row>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                </el-descriptions-item>
                                            </el-descriptions>
                                            <template #footer>
                                                <div style="display: flex;align-items: center;">
                                                    <div style="width: 80px;">算法路径：</div>
                                                    <el-tag readonly size="small">{{ props.row.application }}</el-tag>
                                                    <!-- <el-button size="small" type="primary" plain>修改</el-button> -->
                                                </div>
                                            </template>
                                        </el-card>
                                    </div>

                                </template>
                            </el-table-column>
                            <!-- <el-table-column :align="'center'" prop="operating_system" width="100" label="系统环境" /> -->
                            <el-table-column :align="'center'" prop="version" label="版本" width="60">
                                <template #default="scope">
                                    <el-tag size="small"> {{
                                        scope.row.version
                                    }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" prop="createDate" label="创建日期" width="200">
                                <template #default="scope">
                                    {{ utils.formatDate(scope.row.createDate) }}
                                </template>
                            </el-table-column>


                            <el-table-column :align="'center'" label="操作" width="100" fixed="right">
                                <template #default="scope">
                                    <el-button-group>
                                        <!-- <el-link type="primary">编辑</el-link>&nbsp; -->
                                        <el-popconfirm title="确定要删除当前算法么?" @confirm="deleteAlgorithm(scope.row)">
                                            <template #reference>
                                                <el-link type="primary">删除</el-link>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                            <el-table-column :align="'center'" label="执行" width="100" fixed="right">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-popconfirm title="确定要执行当前算法?" @confirm="executeAlgorithm(scope.row)">
                                            <template #reference>
                                                <el-button style="font-size: large;" size="small" :icon="CaretRight"
                                                    type="success" circle plain></el-button>
                                            </template>
                                        </el-popconfirm>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                        <template #footer>
                            <div style="margin-top:5px;width: 100%;">
                                <pagination-com :pagination="algorithmPagination"
                                    @handleSizeChange="algorithmSizeChangeHanlder"
                                    @handleCurrentChange="algorithmIndexChangeHanlder"></pagination-com>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </el-row>

            <el-dialog v-model="centerDialogVisible" title="" width="30%" center>
                <el-upload ref="upload" style="width: 100%;" :accept="'.json'" action="/algorithmApi/algorithm" drag
                    :on-exceed="handleExceed" :limit="1" :on-success="onUploadHandler">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        算法配置文件<em>上传</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                            支持.json文件后缀
                        </div>
                    </template>
                </el-upload>
            </el-dialog>
            <el-dialog v-model="editParamsDia" :title="`${currentRow.name}`" width="1000" center>
                <el-card>
                    <el-descriptions direction="vertical" class="margin-top" :title="'参数预设修改：'" :column="2"
                        :size="'small'" :border="true">
                        <el-descriptions-item v-for=" item in currentParameters" :span="spanFilter(item.form_type)">
                            <template #label>
                                <div class="cell-item">
                                    {{ item.param_name }}({{ item.zh_name }})
                                </div>
                            </template>
                            <div style="display:flex;justify-content: space-between;">
                                <el-input v-if="!item.form_type" :prefix-icon="EditPen" v-model="item.default_value"
                                    size="small"></el-input>
                                <el-input v-if="item.form_type == 'File'" :prefix-icon="EditPen"
                                    v-model="item.default_value" size="small"></el-input>
                                <el-card v-if="item.form_type == 'Files'" class="files-card">
                                    <template #header>
                                        <div class="card-header">
                                            <el-button @click="openFolderHandler(item)" type="primary" plain
                                                size="small" :icon="FolderOpened"></el-button>
                                        </div>
                                    </template>
                                    <div class="tag-container">
                                        <el-tag size="small" v-for=" (tag, index) in item.default_value" :key="index"
                                            closable :disable-transitions="false"
                                            @close="handleClose(item.default_value, tag)">
                                            {{ tag }}
                                        </el-tag>
                                    </div>
                                </el-card>
                                <el-select v-if="item.form_type == 'algorithm'" v-model="item.default_value"
                                    placeholder="Select" size="small" style="width: 240px"
                                    @change="algorithmChangeHandler">
                                    <el-option v-for="option in algorithmOptions" :key="item.value"
                                        :label="option.label" :value="option.value" />
                                </el-select>
                                <el-input v-if="item.form_type == 'Dir'" :prefix-icon="EditPen"
                                    v-model="item.default_value" size="small"></el-input>
                                <el-input v-if="item.form_type == 'NewFile'" :prefix-icon="EditPen"
                                    v-model="item.default_value" size="small"></el-input>
                                <div v-if="item.form_type == 'runtimeParams'">
                                    <el-row>
                                        <el-col :span="8" v-for=" param in item.default_value"
                                            v-show="param.param_name != 'AlgoName'" style="padding: 0 5px">
                                            <el-row>
                                                <el-col :span="24" style="padding: 10px 0 5px;">
                                                    {{ param.param_name }}({{ param.zh_name
                                                    }})
                                                </el-col>
                                                <el-col :span="24">
                                                    <el-input size="small" v-model="param.default_value"
                                                        :placeholder="`请输入${param.param_name}(${param.zh_name})`" />
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>
                                &nbsp;
                                <el-button v-if="item.form_type !== 'Files'" @click="openFolderHandler(item)"
                                    type="primary" plain size="small" :icon="FolderOpened"></el-button>
                                <file-selection v-if="!item.form_type || item.form_type == 'File'" :inputData="item"
                                    :visible="item.visible" @closeFileDialog="closeFileDialogHandler"
                                    @dialogSubmit="fileSubmitHandler">
                                </file-selection>
                                <files-selection v-if="item.form_type == 'Files'" :inputData="item"
                                    :visible="item.visible" @closeFileDialog="closeFileDialogHandler"
                                    @dialogSubmit="filesSubmitHandler">
                                </files-selection>

                                <dirSelection v-if="item.form_type == 'Dir'" :inputData="item" :visible="item.visible"
                                    @closeFileDialog="closeFileDialogHandler" @dialogSubmit="dirSubmitHandler">
                                </dirSelection>
                                <newFile v-if="item.form_type == 'NewFile'" :inputData="item" :visible="item.visible"
                                    @closeFileDialog="closeFileDialogHandler" @dialogSubmit="dirSubmitHandler">
                                </newFile>

                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="cancelEditHandler">取消</el-button>
                        <el-button type="primary" @click="updateParamsHandler">确定</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch, nextTick } from "vue";
import paginationCom from "@/components/pagination/paginationCom.vue";
import utils from '@/utils/util'
import { ElMessage, ElMessageBox, genFileId, } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { Search, CaretRight, InfoFilled, Edit, EditPen, Folder, FolderOpened, } from "@element-plus/icons-vue";
import HttpService from "@/api/api";
import fileSelection from "@/components/fileSelection/fileSelectionRadio.vue";
import filesSelection from "@/components/fileSelection/fileSelectionCheckbox.vue";
import dirSelection from "@/components/fileSelection/dirSelection.vue"
import newFile from '@/components/fileSelection/newFile.vue'
import { ElInput } from 'element-plus'
import * as _ from "lodash";

interface Tree {
    [key: string]: any
}
let tableData = ref([])
let tableLoading = ref(false)
let algorithmType = ref({
    id: ''
})
let algorithmPagination = reactive({
    page_index: 1,
    page_size: 30,
    page_total: 0,
});
let editParamsDia = ref(false)
let tableRef = ref(null)
let expands = ref([])
const treeData = ref([])
const treeDataLoading = ref(false)
let centerDialogVisible = ref(false)
const upload = ref<UploadInstance>()

let keyword = ref('')
let filterText = ref('')
let currentParameters = ref([])
let currentRow: any = reactive({})
var view = reactive({
    height: window.innerHeight,
});
const defaultProps = {
    children: 'children',
    label: 'name',
}
const getAlgorithm = function () {
    let params = {
        page_size: algorithmPagination.page_size,
        page_index: algorithmPagination.page_index,
        keyword: keyword.value,
        type: algorithmType.value.id.toString()
    };
    tableData.value.length = 0;
    tableLoading.value = true
    HttpService.algorithmManage.getAlgorithms(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200) {
                    res.data.data.map((item, index) => {
                        tableData.value.push(item);
                    });
                    tableLoading.value = false
                    algorithmPagination.page_total = res.data.total
                } else {
                    console.log("获取信息失败" + res);
                    tableLoading.value = false
                }
            }, 300)
        },
        (error) => {
            console.log(error);
            tableLoading.value = false
        }
    );
};

const algorithmOptions = ref([])

const getAllAlgorithm = function () {
    let params = {
        page_size: 1000,
        page_index: 1,
        keyword: ''
    };
    algorithmOptions.value.length = 0
    HttpService.algorithmManage.getAlgorithms(
        params,
        (res) => {
            if (res.status == 200) {
                res.data.data.map((item, index) => {
                    algorithmOptions.value.push(
                        {
                            value: item.id,
                            label: item.name,
                            parameter: item.parameter
                        }
                    );
                });
            } else {
                console.log("获取信息失败" + res);
            }
        },
        (error) => {
            console.log(error);
        }
    );
};

getAllAlgorithm()

const deleteAlgorithm = function (algorithm) {
    let params = {
        id: algorithm.id
    };
    HttpService.algorithmManage.deleteAlgorithm(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: "删除成功 ",
                    type: "success",
                });
                getAlgorithm()
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    );
}
const algorithmSizeChangeHanlder = function (page_size: number) {
    algorithmPagination.page_size = page_size;
    getAlgorithm();
};
const algorithmIndexChangeHanlder = function (page_index: number) {
    algorithmPagination.page_index = page_index;
    getAlgorithm();
};

const onUploadHandler = function (res) {
    if (res.success) {
        ElMessage({
            message: "上传成功 ",
            type: "success",
        });
    } else {
        ElMessage({
            message: res,
            type: "error",
        });
    }
    getAlgorithm();
    centerDialogVisible.value = false
    upload.value!.clearFiles()
}

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const executeAlgorithm = function (algorithm) {
    let params = {
        id: algorithm.id
    };
    HttpService.algorithmManage.executeAlgorithm(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: `${algorithm.identifier}_算法执行成功`,
                    type: "success",
                });
                getAlgorithm()
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const updateAlgorithm = function (algorithm, parameters) {
    let params = {
        id: algorithm.id,
        parameters: JSON.stringify(parameters)
    };
    HttpService.algorithmManage.updateAlgorithm(
        params,
        (res) => {

            if (res.status == 200) {
                ElMessage({
                    message: `${algorithm.name}_算法更新成功`,
                    type: "success",
                });
                editParamsDia.value = false;
                expands.value = [algorithm.id]
                getAlgorithm()
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

const eidtParamsHandler = function (row, parameters) {
    currentRow = null;
    currentParameters.value.length = 0
    parameters.forEach(element => {
        element.visible = ref(false)
        currentParameters.value.push(element)
    });
    currentRow = row
    editParamsDia.value = true;
}

const updateParamsHandler = function () {
    console.log(currentRow)
    console.log(currentParameters.value)
    updateAlgorithm(currentRow, currentParameters.value)
}

const cancelEditHandler = function () {
    editParamsDia.value = false;
}

let currentInput: any = reactive({})
const openFolderHandler = function (param) {
    param.visible = true
    currentInput = param
}

const closeFileDialogHandler = function () {
    currentInput.visible = false
}
const filesSubmitHandler = function (data) {
    let files = []
    data.value.forEach(item => {
        files.push(item.fullPath)
    })
    currentInput.default_value = files
    console.log(currentInput.default_value)
}

const fileSubmitHandler = function (data) {
    currentInput.default_value = data.value.fullPath
    console.log(currentInput.default_value)
}
const dirSubmitHandler = function (data) {
    currentInput.default_value = data
    console.log(currentInput.default_value)
}

const handleClose = (tags, tag: string) => {
    tags.splice(tags.indexOf(tag), 1)
}

const spanFilter = function (type) {
    let span = 1;
    if (type) {
        switch (type) {
            case 'Files':
                span = 2
                break;
            case 'algorithm':
                span = 2
                break;
            default:
                span = 1
                break;
        }
    }
    return span

}

const algorithmChangeHandler = function (algorithmId) {
    currentParameters.value.forEach(item => {
        if (item.form_type == 'runtimeParams') {
            getAlgorithmById(algorithmId, item)
        }
    })
}

const getAlgorithmById = function (algorithmId, runtimeParams) {
    let params = {
        id: algorithmId
    };
    runtimeParams.default_value = []
    HttpService.algorithmManage.getAlgorithmById(
        params,
        (res) => {

            if (res.status == 200) {
                let algorithm = res.data.data
                JSON.parse(algorithm.parameters).forEach(parameter => {
                    if (parameter.param_name !== "inputFile" && parameter.param_name !== "outputFile") {
                        runtimeParams.default_value.push(parameter)
                    }
                })
            } else {
                ElMessage({
                    message: res,
                    type: "error",
                });
            }
        },
        (error) => {
            console.log(error);
        }
    )
}

const getTree = function () {
    let params = {};
    treeData.value.length = 0
    treeDataLoading.value = true
    HttpService.AlgorithmTypeManage.getTree(
        params,
        (res) => {
            setTimeout(() => {
                if (res.status == 200) {
                    let results = res.data.data
                    results.forEach(result => {
                        treeData.value.push(result)
                    })

                } else {
                    ElMessage({
                        message: res,
                        type: "error",
                    });
                }
                treeDataLoading.value = false
            }, 300)
        },
        (error) => {
            console.log(error);
            treeDataLoading.value = false
        }
    )
}

const handleNodeClick = function (type, node) {
    if (node.isLeaf) {
        algorithmType.value = type
        getAlgorithm()
    }
}
const inputHandler = _.debounce(() => {
    getAlgorithm()
}, 300);
const clearTypeHanlder = function () {
    algorithmType.value = {
        id: ''
    }
    getAlgorithm()
}

getAlgorithm()
getTree()

</script>
<style lang="scss" scoped>
.search-container {
    width: 260px;
    display: flex;
    justify-content: space-between;
}

.type-search-container {
    display: flex;
    justify-content: space-between;
}

.custom-tree-node1 {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;

    .node-name {
        word-break: break-all;
        width: calc(100% - 40px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;

    }
}

.value-box {
    width: 100%;
    overflow: auto;
}
</style>
<style lang="scss">
.files-card {
    width: 100%;

    .card-header {
        display: flex;
        justify-content: flex-end;
    }

    .el-card__header {
        padding: 5px;
    }

    .el-card__body {
        padding: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;

        .tag-container {
            width: 100%;
        }

        .el-tag {
            margin-bottom: 10px;
            margin-right: 10px
        }
    }
}
</style>